<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
			    width: 100%;
			    height: 100%;
			    display: flex;
			}
			
			div {
			    position: relative;
			    width: 320px;
			    height: 200px;
			    margin: auto;
			    overflow: hidden;
			}
			
			.demo {
			    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
			    background-size: cover;
			}
			
			.animation {
			    z-index: 1;
			    overflow: hidden;
			
			   
			}
			.animation::before {
			    content: "";
			    position: absolute;
			    top: 0;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
			    background-size: cover;
			    animation: change 10s infinite linear;
			}
			
			@keyframes change {
			    0% {
			        transform: scale(1);
			        filter: blur(0px);
			    }
			    80% {
			        filter: blur(50px);
			        transform: scale(3);
			    }
			    100% {
			        transform: scale(3);
			        filter: blur(50px);
			    }
			}
			
			.filter::before {
			    content: "";
			    position: absolute;
			    top: 0;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
			    background-size: cover;
			    filter: blur(50px);
			    transform: scale(3);
			}
		</style>
	</head>
	<body>
		<div class="img demo"></div>
		<div class="img animation"></div>
		<div class="img filter"></div>
	</body>
</html>
